// 面向对象：模块化
(function (){
    // 构造函数
    function Tab(selector1,selector2){
        // this -> Tab的实例对象
        this.h3s = this.$(selector1);
        this.divs = this.$(selector2);
        this.prevIndex = 0;
        // 添加事件
        this.addEvent();
    }
    // 获取元素的方法
    // function $(selector){
    //     // this -> 不是实例对象
    //     // this.prevIndex 无法访问实例的属性或方法
    //     return document.querySelectorAll(selector);
    // }
    Tab.prototype.$ = function (selector){
        // this -> Tab的实例对象
        // this.prevIndex 可以访问实例的属性或方法
        return document.querySelectorAll(selector);
    }
    Tab.prototype.setClass = function (dom,classn){
        dom.className = classn;
    }
    // 给选项添加事件方法
    Tab.prototype.addEvent = function (){
        // this -> Tab的实例对象
        // 缓冲this指向
        var _this = this;
        for (var i = 0; i < this.h3s.length; i++) {
            // 缓冲每一个选项的索引
            this.h3s[i].index = i;
            // 给每一个选项添加点击事件
            this.h3s[i].onclick = function (){
                // this -> 点击的那个h3
                // 清除上次选中项的类名
                // _this.h3s[_this.prevIndex].className = '';
                // _this.divs[_this.prevIndex].className = '';
                _this.setClass(_this.h3s[_this.prevIndex],'');
                _this.setClass(_this.divs[_this.prevIndex],'');

                // 给当前选中项添加类名
                // _this.h3s[this.index].className = 'active';
                // _this.divs[this.index].className = 'show';
                _this.setClass(_this.h3s[this.index],'active');
                _this.setClass(_this.divs[this.index],'show');

                // 更新上次选中项的索引
                _this.prevIndex = this.index;
            }
        }
    }

    // 工厂函数（返回创建的实例对象）
    function factory(a,b){
        return new Tab(a,b);
    }

    // 对外暴露接口
    window.tab = factory;
})();
